import { Component } from 'react'
const data = [
  {
    label: '苹果',
    name: '苹果',
    checked: true,
  },
  {
    label: '榴莲',
    name: '榴莲',
    checked: false,
  },
  {
    label: '香梨',
    name: '香梨',
    checked: false,
  },
]
class DemoFormCom extends Component {
  state = {
    title: '',
    desc: '', // 描述
    sex: '1', // 男
    city: 'shanghai',
  }

  handleMsg = (e) => {
    this.setState({
      title: e.target.value,
    })
  }

  // 描述信息
  handleDesc = (e) => {
    this.setState({
      desc: e.target.value,
    })
  }

  handleSex = (e) => {
    this.setState({
      sex: e.target.value,
    })
  }

  // 提交表单信息
  submitData = (e) => {
    e.preventDefault()
  }

  handleInput = (e, index) => {
    if (e.target.type === 'checkbox') {
      data[index].checked = !data[index].checked
    }

    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value,
    })
    console.log('checkbox', data, this.state)
  }

  handleSelectCity = (e) => {
    console.log('city', e.target.value, this.state)
    this.setState({
      city: e.target.value,
    })
  }

  // 提交表单信息
  submitData = (e) => {
    e.preventDefault()
  }

  handleInput = (e, index) => {
    if (e.target.type === 'checkbox') {
      data[index].checked = !data[index].checked
    }

    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value
    })
    console.log('checkbox', data, this.state)
  }


  handleSelectCity = (e) => {
    console.log('city', e.target.value, this.state)
    this.setState({
      city: e.target.value
    })
  }

  render () {
    return (<div className='form'>
      <form onSubmit={this.submitData}>
        <h2>06.案例-form表单相关集合</h2>
        <div className='item'>
          <h3>6.1 input</h3>
          {/* {this.state.title} */}
          <input value={this.state.title} placeholder='输入活动名称' onChange={this.handleMsg} />
        </div>
        <div className='item'>
          <h3>6.2 textarea</h3>
          <textarea value={this.state.desc} rows='6' cols='50' placeholder='输入描述内容' onChange={this.handleDesc} />
        </div>
        <div className='item'>
          <h3>6.3 checkbox</h3>
          喜欢的水果：
          {
            data.map((item, key) => {
              return (
                <label key={key}>
                  <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.handleInput(e, key)} /> {item.label}
                </label>
              )
            })
          }

        </div>
        <div className='item'>
          <h3>6.4 input</h3>
          手机号：
          <label>
            <input name='phone' placeholder='请输入手机号' onChange={this.handleInput} />
          </label>
        </div>
        <div className='item'>
          <h3>6.4 radio</h3>
          性别：
          <label>
            <input type="radio" value='1' checked={this.state.sex === '1'} onChange={this.handleSex} /> 男
          </label>
          <label>
            <input type="radio" value='2' checked={this.state.sex === '2'} onChange={this.handleSex} /> 女
          </label>
        </div>
        <div className='item'>
          <h3>6.5 select</h3>
          选择城市：
          <select value={this.state.city} onChange={this.handleSelectCity}>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
          </select>

        </div>


      </form>
    </div>);
  }
}

export default DemoFormCom
